import React, { useState, useEffect } from 'react';
import { Drawer, Tag } from '@ss/mtd-react';
import { Table, Loading } from '@block/plug';
import M from '@block/utils';
import { PersonListStatus, RulePersonListDetail } from '../../type';
import URL from '../../url';

/** Props 声明 */
interface Props {
  /** 规则id */
  ruleId: number;
  /** 关闭弹窗方法 */
  setRuleListDrawerVisible: React.Dispatch<React.SetStateAction<boolean>>;
}

/**
 * 规则名单侧滑
 */
const RuleListDrawer = (props: Props) => {
  const { ruleId, setRuleListDrawerVisible } = props;

  /** state 定义 */
  const [dataSource, setDataSource] = useState<Pagination<RulePersonListDetail>>(null); // 表格数据
  const [loading, setLoading] = useState<boolean>(false); // 页面loading状态

  /**
   * 初始化表格数据
   * @param pageNo 当前页编号
   * @param pageSize 分页大小
   */
  const getTableData = async (pageNo: number, pageSize: number) => {
    try {
      setLoading(true);
      const res = await M.$fetch<Pagination<RulePersonListDetail>>(URL.queryPersonListByRuleId, {
        cond: { ruleId },
        page: {
          pageNo,
          pageSize,
        },
      });
      setDataSource(res);
    } finally {
      setLoading(false);
    }
  };

  /** didMount */
  useEffect(() => {
    getTableData(1, 20);
  }, []);

  return (
    <div style={{ height: '600px' }}>
      <Drawer title="规则名单" width={800} visible onClose={() => setRuleListDrawerVisible(false)}>
        <Loading loading={loading}>
          <Table
            useSticky
            data={dataSource?.pageList}
            pagination={{
              defaultPageSize: 20,
              total: dataSource?.page?.totalCount,
              showSizeChanger: true,
              showQuickJumper: true,
              pageSizeOptions: [10, 20, 50, 100],
              defaultCurrent: 1,
              showTotal: true,
              onChange: getTableData,
            }}
          >
            <Table.Column dataKey="empName" width="170">
              人员
            </Table.Column>
            <Table.Column dataKey="orgNamePath" width="180" expand={{ mode: 'tooltip', minRows: 2 }}>
              所在组织名称
            </Table.Column>
            <Table.Column dataKey="jobfamilyName" width="100">
              JobFamily
            </Table.Column>
            <Table.Column dataKey="jobGropName" width="100" expand={{ mode: 'tooltip', minRows: 2 }}>
              JobGroup
            </Table.Column>
            <Table.Column dataKey="level" width="60" expand={{ mode: 'tooltip', minRows: 2 }}>
              职级
            </Table.Column>
            <Table.Column dataKey="sensitivePosTypeNameList" width="150" expand={{ mode: 'tooltip', minRows: 2 }}>
              敏感岗位分类
            </Table.Column>
            <Table.Column
              dataKey="personListStatus"
              width="70"
              render={(value) => {
                let theme = null;
                let name = null;
                switch (value) {
                  case PersonListStatus.needSubmit: {
                    name = '待提交';
                    theme = 'orange';
                    break;
                  }
                  case PersonListStatus.audit: {
                    name = '审批中';
                    theme = 'pure';
                    break;
                  }
                  case PersonListStatus.valid: {
                    name = '生效中';
                    theme = 'green';
                    break;
                  }
                  case PersonListStatus.invalid: {
                    name = '已失效';
                    theme = 'gray';
                    break;
                  }
                  case PersonListStatus.deleted: {
                    name = '已删除';
                    theme = 'red';
                    break;
                  }
                  default:
                    break;
                }
                return <Tag theme={theme}>{name}</Tag>;
              }}
            >
              状态
            </Table.Column>
          </Table>
        </Loading>
      </Drawer>
    </div>
  );
};

export default RuleListDrawer;
